<template>
  <div>
    <tablePaging :tableItem="tableItem" :operationItem="operationItem"/>
  </div>
  <el-dialog v-model="dialog.visible" title="新增" @close="closeHandle">
    <el-form :rules="rules" ref="ruleFormRef" :model="dialog.dataForm" label-width="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="名称" prop="name">
            <el-input maxlength="30" v-model="dialog.dataForm.name" placeholder="请输入名称" />
          </el-form-item>
        </el-col>
        <el-col :span="8" style="margin-left: 20%">
          <el-form-item label="唯一标识" prop="typeCode">
            <el-input v-model="dialog.dataForm.typeCode" placeholder="请输入唯一标识" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="排序" prop="orderNum">
            <el-input type="number" v-model="dialog.dataForm.orderNum" placeholder="请输入排序号" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialog.visible = false">取 消</el-button>
                    <el-button type="primary" @click="confirm()"> 确 定</el-button>
                </span>
    </template>
  </el-dialog>
</template>

<script setup>
import tablePaging from '@/views/common/component/table-paging'
import { onMounted, reactive, ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  tableItem,
  operationItem
} from './const.js'
import { ElMessage } from 'element-plus'
import {addDictItem, delDictItem, editDictItem} from '@/api/config/dic'
const router = useRouter()
const { proxy } = getCurrentInstance();
const ruleFormRef = ref('')
const dialog = reactive({
  type: '',
  visible: false,
  dataForm: {
    id: '',
    name: '',
    typeCode: '',
    orderNum: '',
    parentId: 0
  }
})
const rules = reactive({
  name: [{ required: true, message: '请输入名称', trigger: 'blur' },],
  typeCode: [{ required: true, message: '请输入唯一标识', trigger: 'blur' },],
  orderNum: [{ required: true, message: '请输入排序号', trigger: 'blur' },],
})

onMounted(() => {
  initTableItem()
})
function initTableItem() {
  // 新增
  operationItem.menuArray[0].handle = () => {
    addHandle()
  }
//详情
  tableItem.btnArray[0].handle = (row) => {
    console.log({
      id: row.id,typeCode: row.typeCode,typeName: row.name
    })
    if(row.isTree) {
      router.push({
        path: '/modules/config/dictionary/component/tree',
        query: { id: row.id,typeCode: row.typeCode,typeName: row.name }
      })
    } else {
      router.push({
        path: '/modules/config/dictionary/component/list',
        query: { id: row.id,typeCode: row.typeCode,typeName: row.name }
      })
    }
    sessionStorage.setItem('typeCode', row.typeCode)
  }
  // 修改
  tableItem.btnArray[1].handle = (row) => {
    editHandle(row)
  }
  // 删除
  tableItem.btnArray[2].handle = (row) => {
    proxy.$modal.confirm("确定删除" + row.name || '').then(() => {
      delDictItem(row.id).then(res => {
        ElMessage.success('操作成功'); tableItem.pageInfo.paging()
      })
    })
  }
}
function addHandle() {
  dialog.type = 'add'
  dialog.visible = true
}
function editHandle(row) {
  dialog.type = 'edit'
  dialog.visible = true
  dialog.dataForm.id = row.id
  dialog.dataForm.name = row.name
  dialog.dataForm.typeCode = row.typeCode
  dialog.dataForm.orderNum = row.orderNum
}
function closeHandle() {
  dialog.type = ''
  dialog.visible = false
  dialog.dataForm = {
    id: '',
    name: '',
    typeCode: '',
    orderNum: '',
    parentId: 0
  }
}
function confirm() {
  if (!ruleFormRef.value) return
   ruleFormRef.value.validate((valid, fields) => {
    if (!valid) { return }
    if (dialog.type == 'edit') {
      editDictItem(dialog.dataForm).then(res => {
        ElMessage.success('操作成功'); dialog.visible = false; tableItem.pageInfo.paging()
      })
    } else {
      addDictItem(dialog.dataForm).then(res => {
        ElMessage.success('操作成功'); dialog.visible = false; tableItem.pageInfo.paging()
      })
    }
  })
}
</script>
<style></style>
